{{extend '../_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}

{{block 'body'}}
<div style="margin: 90px 0px;">
  <section class="container">
    <div class="row">
      {{include '../_partials/settings-nav.html'}}
      <div class="col-md-5">
        <form id="profile_form" method="post">
          <div class="form-group">
            <label for="">账号</label>
            <input type="email" name="email" value="{{ user.email }}" readonly style="border: none;">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">昵称</label>
            <input type="text" class="form-control" id="" name="nickname" placeholder="" value="{{ user.nickname }}">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">介绍</label>
            <textarea class="form-control" rows="3" placeholder="自我介绍一下吧" name="bio">{{user.bio}}</textarea>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">性别</label>
            <div>
              
              <input type="hidden" name="" id="hgender" value="{{user.gender}}">
              
              <label class="radio-inline">
                <input type="radio" name="gender" id="" value="男"> 男
              </label>
              <label class="radio-inline">
                <input type="radio" name="gender" id="" value="女"> 女
              </label>
              <label class="radio-inline">
                <input type="radio" name="gender" id="" value="保密"> 保密
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="">生日</label>
            <input  class="form-control" id="bir" name="birthday" placeholder="" value="{{user.birthday}}">
          </div>
          <button type="submit" class="btn btn-success">保存</button>
        </form>
      </div>
      <div class="col-md-2 profile-avatar">
        <form enctype="multipart/form-data" method="post" name="fileInfo" id="upavatar">
              <img src="{{user.avatar}}" alt="" id="selectImg" class="head-img" name="selectImg" style="max-width: 150px; max-height: 150px;">
              <input type="file" id="uploadImg" onchange="xmTanUploadImg(this)" name="selectImgInput" accept="/png,/jpg">
              <a href="javascript:void()" download="picture.jpg" id="xmTanDownload" style="display: none;">点击下载</a>
              <img  id="xxx" src="" alt="">
              <div>
                <button type="submit" class="btn btn-success" id="submitButton" disabled="true">保存头像</button>
              </div>
        </form>
      </div>
    </div>
  </section>
</div>
{{/block}}


{{block 'script'}}
<!-- <script src="/node_modules/bootstrap-fileinput/css/fileinput.min.css"></script> -->
<script src="/node_modules/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="/node_modules/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="/public/js/laydate/laydate.js"></script>
<script>
  laydate.render({
    elem: '#bir',
    type: 'date', // 为xx-xx-xx
    trigger: 'click'//默认为click，即点击后出现日历框
  })

  // 选择性别的值
  var hg = $('#hgender').val()  //val()方法是选中被选择的按钮
  $("input[name=gender]").each(function () {
    var str = $(this).val();
    if (str == hg) {
      $(this).attr('checked', true)      // 为选中的按钮添加checked属性
    }
  })

  $('#profile_form').on('submit', function(e) {
    e.preventDefault()
    let formData = $(this).serialize();
    $.ajax({
      url: '/settings/profile',
      dataType: 'json',
      data: formData,
      type: 'post',
      async: true,
      success: function(data) {
        console.log(data);
        var err_code = data.err_code;
        if(err_code === 0) {
          // 修改成功
          window.alert('信息保存成功')
          window.location.href = '/'
          // window.location.reload();
        }else {
          window.alert('信息修改失败')
        }
      }
    })
  })

  // 使用bootstrap-fileinput来完成点击图片时进行图片的切换
  var formData;
  function xmTanUploadImg(obj) {
      // var submitButton =  document.getElementById("submitButton");
      // submitButton.setAttribute("disabled", false)
      $('#submitButton').attr('disabled', false)

      console.log(obj);
      let imgFile = obj.files[0];
      formData = new FormData();
      formData.append('avatar', imgFile)
      console.log('imgFile',imgFile, 'formData为',formData.get('avatar'));
      var reader = new FileReader();
      reader.readAsDataURL(imgFile);
      reader.onload = function (e) {    
          console.log('e为', e);
          //成功读取文件
          var img = document.getElementById("selectImg");
          img.src = e.target.result;   //或 img.src = this.result / e.target == this

          //实现点击下载图片功能
          var xmTanDownload =  document.getElementById("xmTanDownload");
          xmTanDownload.style.display = 'inline';
          xmTanDownload.setAttribute("href", e.target.result);  //给a标签设置href
          xmTanDownload.setAttribute("download", imgFile.name)
          console.log(imgFile.name);
          // console.log(xmTanDownload.href);
      };
    }
    $('#upavatar').on('submit', function(e) {
    e.preventDefault()
    // let formData = $(this).serialize();
    console.log('11111111', formData.get('avatar'));
    let formDataInput = formData;
      $.ajax({
        url: '/settings/upavatar',
        dataType: 'json',
        data: formDataInput,
        cache: false, //上传文件不需要缓存
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        type: 'post',
        async: true,
        success: function(data) {
          console.log(data);
          console.log(data.filePath);
          // 设置图片预览功能
          // $('#xxx').attr('src',data.filePath);
          if(data.err_code === 0) {
            window.alert('头像更改成功！')
            window.location.reload();
            // window.location.href = '/'
          }else {
            window.alert('头像更改失败！')
            window.location.reload();
          }
        }
      })
    })
</script>
  
{{/block}}